<template style="width: 100%">
  <div class="layout" style="position: relative">
    <el-container style="width: 100%; margin: 0 auto;">
      <el-header style="height: auto">
        <div class="toplunbo1" style="height:280px">
          <el-carousel   indicator-position="none">
            <el-carousel-item v-for="url in lunboArr" >
              <img :src="url.url" style="height:300px;width:100%; margin: 0 auto"/>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-header>

      <el-main style="padding-top: 0; ">

        <div style=" width: 408px;" class="p1">
            <div style="padding-bottom: 8px">
              <div style="float: left;height: 36px;font-size: 24px;color: #f27b01;line-height: 36px;margin-top: -6px">
                <img src="/imgs/home/xiaocar.png"style="float: left; padding-top: 3px;margin-right: 5px ;width: 30px;" alt="">热租品牌
              </div>
              <div class="linkdiv1" style="width:100%; position: relative; float: left; margin-right: 14px " >
                <a class="ping1" href="/vehicle" >
                      <span class="text01">
                        <img src="/imgs/home/car-icon/xfl.jpg" alt="">
                      </span>
                  <br>

                </a>
                <a href="/vehicle">
                      <span class="text01">
                        <img src="/imgs/home/car-icon/dz.jpg" alt="">
                      </span>
                  <br>

                </a>
                <a href="/vehicle">
                      <span class="text01">
                        <img src="/imgs/home/car-icon/fte.jpg" alt="">
                      </span>
                  <br>

                </a>
                <a href="/vehicle">
                      <span class="text01">
                        <img src="/imgs/home/car-icon/bt.jpg" alt="">
                      </span>
                  <br>

                </a>
                <a href="/vehicle">
                      <span class="text01">
                        <img src="/imgs/home/car-icon/ft.jpg" alt="">
                      </span>
                  <br>

                </a>
                <a href="/vehicle">
                      <span class="text01">
                        <img src="/imgs/home/car-icon/mzd.jpg" alt="">
                      </span>
                  <br>

                </a>
                <a href="/vehicle">
                      <span class="text01">
                        <img src="/imgs/home/car-icon/jl.png" alt="">
                      </span>
                  <br>

                </a>
                <a href="/vehicle">
                      <span class="text01">
                        <img src="/imgs/home/car-icon/bz.jpg" alt="">
                      </span>
                  <br>
                </a>

              </div>
            </div>
        </div>

        <div style=" float: right; width: 810px;" class="p2">
          <div style="padding-bottom: 8px">
            <div style="float: left;height: 36px;font-size: 24px;color: #f27b01;line-height: 36px;margin-top: -6px">
              <img src="/imgs/home/icon.png"style="float: left; padding-top: 3px;margin-right: 5px ;width: 30px;" alt="">限时特惠
            </div>
            <img src="/imgs/home/yh.jpg" alt="" style="width: 100%; height: 505px">
          </div>
        </div>
      </el-main>
      <el-footer>
        <div style="float: left; width: 582px; margin-right: 14px">
          <div style=" font-size: 24px">
              营业网点
          </div>
          <div style="float: left; height: 370px;width: 300px; border: 1px solid #ebebeb">
            <el-form :inline="true" style="margin-top: 20px">
              <!--  第六步：创建地图容器元素-->
              <div style="width: 100%; height: 370px;" id="mapContainer"></div>
            </el-form>
          </div>
          <div style="padding-left: 22px; width: 236px; float: right" v-for="station in outletsArr3">
              <p style="font-size: 16px; line-height: 22px; color: #333; margin-top: 20px; margin-bottom: 10px "><b>{{station.stationName}}</b></p>
              <p style="line-height: 18px;width: 236px;color: #999;text-overflow: ellipsis;font-size: 13px; margin: 0">门店电话: 021-6416980</p>
              <p style="line-height: 18px;width: 236px;color: #999;text-overflow: ellipsis;font-size: 13px ;margin: 0">营业时间: 08:00-21:00</p>
              <p  style="line-height: 18px;width: 236px;color: #999;text-overflow: ellipsis;font-size: 13px; margin: 0">门店地址: {{station.stationLocation}}</p>
          </div>
        </div>
        <div style="width: 570px;float: left;margin-right: 14px">
          <div style="padding-bottom: 8px">
            <div style="float: left; font-size: 24px">
               <span style="margin-left: 8px">租车问答</span>
            </div>
            <div style="height: 370px; line-height: 24px; border: 1px solid #ebebeb;">
              <img src="/imgs/home/wt.jpg" style="width: 80%; height: 140px" alt="">
              <dl class="dl-1" style="margin-left: 8px">
                <dt>Q:租车需要交押金吗？</dt>
                <dd>取车时根据不同的车型，以信用卡（借记卡）预授权的形式，冻结一笔数额不等的资金作为车辆押金，还车时当场撤销，同时以信用卡（借记卡）预授权的形式，冻结一笔资金作为违章押金，若无违章，会在还车后的30-45天内由银行自动解冻。</dd>
                <dt>Q:如何续租</dt>
                <dd>若需续租，可提前24小时致电客服400-888-6608申请续租。也可登录官网或APP自行续租，线上续租每个订单续租租期不得超过14天，续租订单金额不得超过订单授权的100%，续租成功与否视车辆调配情况而决定。</dd>
                <dt>Q:什么是手续费</dt>
                <dd>是指清洁费、车辆保养费、单据制作费、人员服务费等。</dd>
              </dl>
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
const lunboArr = ref([
  {url:"/imgs/home/lunbo4.jpg"},
  {url:"/imgs/home/lunbo5.jpg"},
]);

onMounted(()=>{
  loadOutlets3();//表示在DOM更新之后再执行,因为我们要确保上方div创建之后再给div里渲染地图
  loadOutlets4();
});
//车辆站点
const outletsArr2=ref([]);
const outletsArr3=ref([]);
const loadOutlets3=()=>{
  axios.get(BASE_URL+"/v1/vehicle/selectStation?").then((response)=>{
    if(response.data.code==2000){
      outletsArr2.value=response.data.data;
      if(outletsArr2.value.length>2){
        outletsArr3.value.push(outletsArr2.value[0])
        outletsArr3.value.push(outletsArr2.value[1])
        outletsArr3.value.push(outletsArr2.value[2])
      }else {
        outletsArr3.value=response.data.data;
      }
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//地图标点
const stationPosition=ref({x:"116.44589753040626",y:"39.91511311108219"});
const markersData = ref([]);
const outletsArr4=ref([]);
const loadOutlets4 = () => {
  axios.get(BASE_URL + "/v1/vehicle/selectStation").then((response) => {
    if (response.data.code == 2000) {
      outletsArr4.value = response.data.data;
      markersData.value = outletsArr4.value.map(item => ({
        id: item.id,
        stationName: item.stationName,
        stationLocation: item.stationLocation,
        stationPosition: JSON.parse(item.stationPosition),
        createTime: item.createTime,
      }));
      let map = new BMapGL.Map("mapContainer");
      let point = new BMapGL.Point(stationPosition.value.x, stationPosition.value.y);
      map.centerAndZoom(point, 15);

      markersData.value.forEach((markerData) => {
        let icon = new BMapGL.Icon(
            'https://s1.4sai.com/src/img/png/02/0289165d4f314db78acb9e77bd4e6948.png?e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:VI4gpo1M00uRNzCyyiKhoZ6Ab_w=',
            new BMapGL.Size(30, 45)
        );
        let marker = new BMapGL.Marker(new BMapGL.Point(markerData.stationPosition.lng, markerData.stationPosition.lat), { icon: icon });

        map.addOverlay(marker);

        marker.addEventListener('click', () => {
          let infoWindowContent = `
            <div style="width: 280px;margin:0">
              <h2 style="margin-top:0">站点名称：${markerData.stationName}</h2>
              <p>站点位置：${markerData.stationLocation}</p>
              <p>门店电话：021-64160981</p>
              <span>营业时间：8:00-21:00</span>
            </div>
          `;
          // 创建信息窗口
          let infoWindow = new BMapGL.InfoWindow(infoWindowContent);
          map.openInfoWindow(infoWindow, marker.getPosition());
        });
      });

      console.log(markersData.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};
</script>



<style scoped>
.linkdiv1 a{
  position: relative;
  float: left;
  width: 178px;
  height: 88px;
  padding: 10px 0;
  text-decoration: none;
  transition: 0.3s;
  margin-right: 24px;
  margin-bottom: 22px;
  text-align: center;
  border: 1px solid #ebebeb;
}
.linkdiv1 .text01 img{
  width: 60%;
  height: 100%;
}
.p1, .p2 {
  display: inline-block; /* 使两个 div 行为类似于行内块元素 */
  vertical-align: top; /* 确保它们顶部对齐 */
  margin-top: 50px;
}
.dl-1{
  font-size: 18px;
  color:#333;
}
.dl-1 dd{
  font-size: 14px;
  color: #666;
}
</style>